<script setup lang="ts">
definePageConfig({
    navigationBarTitleText: '我的评价'
});
import { useNurseOrders } from '@/service';
import { storeToRefs } from 'pinia';
import { ref, computed } from 'vue';
import { useAuthStore } from '@/store';
import { useImage } from '@/hooks';
import { useDayjs } from '@/hooks/common';

const { nurseUser } = storeToRefs(useAuthStore());

const { $dayjs } = useDayjs();

const { commentList } = useNurseOrders();
const list = ref();
getData();
const date = computed(() => (createTime: string) => {
    if (createTime) {
        const now = $dayjs();
        const date = $dayjs(createTime).from(now);
        return date;
    }
    return '';
});
async function getData() {
    const { error, success } = await commentList({ pageNo: 1, pageSize: 10, userId: nurseUser.value.id });

    if (!error && success?.records) {
        const newArr = success?.records.map((item: any) => {
            let images = item?.pic?.split(',');
            images = images.map((p: string) => {
                return {
                    src: useImage(p),
                    imgUrl: useImage(p)
                };
            });
            return {
                reply: item.reply,
                images,
                info: {
                    content: item.description,
                    nickName: item.nurseType_dictText,
                    score: item.rate,
                    time: date.value(item.createTime),
                    size: item.title
                }
            };
        });
        list.value = [...newArr];
    }
}
const initNo = ref(0);

const showPreview = ref(false);

const hideFn = () => {
    showPreview.value = false;
};
const clickImages = (imgs: any) => {
    initNo.value = imgs.index;
    showPreview.value = true;
};
</script>
<template>
    <basic-layout>
        <!-- <custom-navbar title="我的评价" showLeft /> -->
        <view class="w-375px flex-col-center">
            <nut-empty v-if="list?.length == 0" description="暂无评论"></nut-empty>
            <view class="w-360px">
                <nut-cell v-for="item in list">
                    <nut-comment class="important:text-14px" :operation="[]" header-type="complex" images-rows="multi"
                        :images="item?.images" :info="item?.info" ellipsis="6" @clickImages="clickImages">
                        <template #comment-shop-reply>
                            <view v-if="item.reply">
                                <span class="block">客服回复：</span>
                                {{ item.reply }}
                            </view>
                        </template>
                    </nut-comment>
                    <nut-ImagePreview pagination-color="#059669" closeable close-icon-position="top-left"
                        :show="showPreview" pagination-visible :images="item?.images" :init-no="initNo"
                        @close="hideFn" />
                    />
                </nut-cell>
            </view>
        </view>
    </basic-layout>
</template>
<style>
.nut-comment-header__user-avter {
    display: none;
}
</style>
